import React, { Component } from 'react'
import Items from './Items'
import Modalbox from './Modalbox'

export default class TodoList extends Component {
    constructor(){
        super();
        this.state={
            todalist:[{
                id:1,
                name:'吃饭'
            },
            {
                id:2,
                name:'睡觉'
            },
            {
                id:3,
                name:'打豆豆'
            }],
            msg:'',
            keywords:'',
            isShow:false,
            editcontent:'',
            id:""
        }
    }
    handleChange=(event)=>{
        this.setState({
            msg:event.target.value
        })
    }
    handleAdd(){
        this.state.todalist.push({
            id:new Date().getTime(),
            name:this.state.msg
        })
        this.setState({
            msg:''
        })
    }
    handleSearch(keywords){
        console.log('search')
        this.setState({
            keywords:this.state.msg
        })
        // this.state.todalist.filter((item)=>{
        //     return item.name.indexOf(this.state.msg)
        // })
    }
    handleDel(id){
        this.state.todalist.find((item,index)=>{
            if(id===item.id){
                this.state.todalist.splice(index,1)
            }
            return true
        })
        this.setState({})
    }
    handleEdit(id){
        console.log(id)
        this.setState({
            isShow:true,
            id
        })
        // debugger;
        this.state.todalist.forEach((item)=>{
            if(id===item.id){
                this.setState({
                    editcontent:item.name
                },()=>{
                    console.log(this.state.editcontent)
                })
            }
            return true
        })
    }
    handleClose(){
        this.setState({
            isShow:false,
        })
    }
    handleSubmit(id){
        this.state.todalist.forEach((item,index)=>{
            debugger
            if(id===item.id){
                this.state.todalist[index].name=this.state.editcontent
            }
            return true
        })
        this.setState({
            isShow:false,
        })
    }
    change(event){
        this.setState({
            editcontent:event.target.value
        })
    }
    render() {
        var list = this.state.todalist.filter((item)=>{
            return item.name.indexOf(this.state.keywords)>-1
        })
        return (
            <div>
                <input value={this.state.msg} onChange={this.handleChange} type="text"/>
                <button onClick={()=>this.handleAdd()}>添加</button>
                <button onClick={()=>this.handleSearch()}>查找</button>
                <Items del={(id)=>this.handleDel(id)} edit={(id)=>this.handleEdit(id)} list={list}></Items>
                {
                    this.state.isShow?<Modalbox change={(event)=>this.change(event)} id={this.state.id} submit={(id)=>this.handleSubmit(id)} con={this.state.editcontent} close={()=>this.handleClose()}>编辑</Modalbox>:''
                }
            </div>
        )
    }
}
